<template>
  <div>
    <el-dialog
      :visible.sync="dialogShow"
      :show-close="true"
      :append-to-body="false"
      :before-close="handleClose"
      class="create-chart-list-dialog small-common-dialog-size">
      <div v-loading="addLoading" class="create-chart-list-main">
        <Title :total="chartListData.total || 0" :title="title" font-size="16px" />
        <el-form
          ref="chartForm"
          :model="dataForm"
          :rules="formRules"
          label-position="left"
          class="el-form-box-left chartForm"
          label-width="72px">
          <el-form-item label="图表名称" prop="chartName">
            <el-input
              v-model.trim="dataForm.chartName"
              maxlength="20"
              placeholder="请填写图表名称"
              name="name"
              type="text"/>
          </el-form-item>
          <el-form-item label="图表分类" prop="chartType" style="margin-bottom: 12px">
            <el-select v-model="dataForm.chartType" popper-class="global-select-down" name="categoryId">
              <template v-for="item in chartTypeOpt">
                <el-option
                  v-if="!item.hide"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id" />
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="图表元素" prop="chartOpt" class="is-required" style="margin-bottom: 6px">
            <el-checkbox v-model="dataForm.isAxis" :disabled="dataForm.chartType === 3">坐标轴</el-checkbox>
            <el-checkbox v-model="dataForm.isDataLabel">数据标签</el-checkbox>
            <el-checkbox v-model="dataForm.isGrid" :disabled="dataForm.chartType === 3">网格线</el-checkbox>
            <el-checkbox v-model="dataForm.isLegend">图例项</el-checkbox>
          </el-form-item>
          <el-form-item v-show="isCombo" label="" prop="chartOpt">
            <!-- <el-dropdown :hide-on-click="false" placement="bottom-start" trigger="click">
              <div class="select-field-dropdown">
                <span class="box">图例项(维度)：</span>
                <i class="el-icon-arrow-down el-icon--right"/>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-checkbox-group
                  v-model="dataForm.yAxis"
                  class="select-chart-field">
                  <el-dropdown-item
                    v-for="item in fieldoptions"
                    :key="item.id">
                    <el-checkbox
                      :label="item.title">{{ item.title }}</el-checkbox>
                  </el-dropdown-item>
                </el-checkbox-group>
              </el-dropdown-menu>
            </el-dropdown> -->
            <el-select
              v-show="isCombo"
              v-model="dataForm.yAxisCombo"
              collapse-tags
              clearable
              radio
              popper-class="select-field-dropdown radio global-select-down"
              style="margin-right: 24px;"
              placeholder="第一图例项(维度)：">
              <el-option
                v-for="item in fieldoptions"
                :key="item"
                :label="item"
                :value="item"/>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="chartOpt">
            <el-select
              v-model="dataForm.yAxis"
              :placeholder="isCombo ? '第二图例项(维度)：' : '图例项(维度)：'"
              multiple
              collapse-tags
              clearable
              popper-class="select-field-dropdown multiple global-select-down">
              <el-option
                v-for="item in fieldoptions"
                :key="item"
                :label="item"
                :value="item"/>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="chartOpt">
            <el-select
              v-model="dataForm.xAxis"
              collapse-tags
              clearable
              popper-class="select-field-dropdown radio global-select-down"
              placeholder="轴标签(类别)：">
              <el-option
                v-for="item in fieldoptions"
                :key="item"
                :label="item"
                :value="item"/>
            </el-select>
          </el-form-item>
          <el-form-item label="图表颜色" prop="chartOpt" class="is-required" style="margin-bottom: 20px;">
            <ChartColorSelector :init-color="dataForm.chartColor" :chart-color-list="chartColorList" @receive-data="receiveData"/>
          </el-form-item>
        </el-form>
        <div class="create-chart-btn-container">
          <el-button type="primary" size="small" @click="toSubmit">提交</el-button>
          <el-button class="cancel-btn-style" size="small" type="info" @click="handleClose">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Title from '@/components/Title';
import { chartTypeList, chartColorList } from '@/filters/status';
// eslint-disable-next-line no-unused-vars
import { createChart, getChartEdit, editChart } from '@/api/reportManage';
import ChartColorSelector from '@/components/ReportManage/ChartColorSelector';

export default {
  name: 'ChartList',
  components: {
    Title,
    ChartColorSelector
  },
  filters: {
    chartTypeFilter(type) {
      return chartTypeList[Number(type) || 0].name || '';
    }
  },
  props: {
    sheetId: {
      type: Number | String,
      default: ''
    }
  },
  data() {
    return {
      title: '新建图表',
      addLoading: false,
      dialogShow: false,
      chartListData: {},
      page: 1,
      id: '',
      perPage: 20,
      chartTypeOpt: chartTypeList,
      dataForm: {
        chartName: '',
        chartType: 1,
        isAxis: true,
        showXAxis: true,
        showYAxis: true,
        isDataLabel: true,
        isChartTitle: true,
        isGrid: false,
        yAxis: [],
        xAxis: '',
        isLegend: true,
        yAxisCombo: '',
        chartColor: '0'
      },
      formRules: {
        chartName: [{ required: true, trigger: 'blur', message: '请填写图表名称' }],
        chartType: [{ required: true, trigger: 'change', message: '请选择类型' }]
      },
      fieldoptions: [],
      isEdit: false,
      chartId: '',
      editLoading: false,
      chartColorList,
      isCombo: false // 组合图形
    };
  },
  watch: {
    'dataForm.chartType'(newV) {
      const arr = [9, 10, 11, 12];
      this.isCombo = (arr.indexOf(newV) !== -1);
      // 切换为非组合时 清空
      if (!this.isCombo) {
        this.dataForm.yAxisCombo = '';
      }
    }
  },
  created() {
  },
  methods: {
    receiveData(data) {
      this.dataForm.chartColor = data;
    },
    showDialog(type, fieldTitle, id) {
      this.fieldoptions = fieldTitle;
      if (type === 'edit' && id) {
        this.isEdit = true;
        this.chartId = id;
        this.title = '编辑图表';
        this.getChartData();
      } else {
        this.isEdit = false;
        this.title = '新建图表';
      }
      this.dialogShow = true;
    },
    getChartData() {
      this.editLoading = true;
      getChartEdit({ id: this.chartId }).then(res => {
        this.editLoading = false;
        if (res.code && res.data) {
          Object.assign(this.dataForm, res.data);
          if (!this.fieldoptions.includes(this.dataForm.xAxis)) {
            this.dataForm.xAxis = '';
          }
          if (res.data.yAxisCombo && this.isCombo) {
            this.dataForm.yAxis.push(res.data.yAxisCombo);
          }
          this.dataForm.yAxis = this.dataForm.yAxis.filter(i => {
            if (!this.fieldoptions.includes(i)) {
              return false;
            }
            return true;
          });
        }
      });
    },
    toSubmit() {
      const dataForm = this.dataForm;
      if (dataForm.chartName.length > 20) {
        this.$message({ type: 'warning', message: '请输入小于20个字的图表名称' });
        return;
      }
      this.$refs['chartForm'].validate((valid) => {
        if (valid) {
          if (dataForm.xAxis === '' || dataForm.yAxis.length === 0) {
            this.$message({ type: 'warning', message: '请选择图例项和轴标签' });
            return;
          }
          if (dataForm.yAxis.length > 10) {
            this.$message({ type: 'warning', message: '图例项最多选择10个' });
            return;
          }
          dataForm.reportId = this.$route.params.fileId;
          dataForm.tabId = this.sheetId;
          if (!this.isEdit) {
            this.create(dataForm);
          } else {
            this.edit(dataForm);
          }
        } else {
          return false;
        }
      });
    },
    create(params) {
      this.addLoading = true;
      createChart(params).then(res => {
        this.addLoading = false;
        if (res.code === 200) {
          this.$message.success('新建成功');
          this.handleClose(true);
        } else {
          this.$message.error(res.message);
        }
      }).catch(err => {
        console.log(err);
        this.addLoading = false;
        // this.$message.error(err);
        if (err.message !== '网络错误！请检查网络状态...') {
          this.$message.error(err.message);
        }
      });
    },
    edit(params) {
      this.addLoading = true;
      editChart(params).then(res => {
        this.addLoading = false;
        if (res.code === 200) {
          this.$message.success('编辑成功');
          this.handleClose(true);
        } else {
          this.$message.error(res.message);
        }
      }).catch(err => {
        if (err.message !== '网络错误！请检查网络状态...') {
          this.$message.error(err.message);
        }
        this.addLoading = false;
      });
    },
    handleClose(init = false) {
      this.dialogShow = false;
      this.chartListData = {};
      this.id = '';
      if (init || this.isEdit) {
        this.dataForm = {
          chartColor: '0',
          chartName: '',
          chartType: 1,
          isAxis: true,
          showXAxis: true,
          showYAxis: true,
          isDataLabel: true,
          isChartTitle: true,
          isGrid: false,
          isLegend: true,
          yAxis: [],
          xAxis: '',
          yAxisCombo: ''
        };
      }
    },
    async getField(name = '') {
      // try {
      //   const res = await getFieldList({ name, use: 2 });
      //   if (res.data) {
      //     res.data.forEach(i => {
      //       i.fieldInfo.forEach(j => {
      //         j.check = false;
      //       });
      //     });
      //     this.fieldList = res.data;
      //   }
      // } catch (error) {
      //   console.error(error);
      // }
    }
  }
};
</script>
<style lang="scss" scoped>
.create-chart-list-dialog {
  & ::v-deep {
    .el-dialog {
      width: 930px;
      border-radius: 12px;
      min-height: 430px;
    }
    .el-dialog__body {
      padding: 2px 32px 32px 32px;
    }
  }
}
.create-chart-list-main {
  .text {
    font-size:15px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(20,28,61,1);
  }
  .chart-table {
    margin-top: 20px;
  }
  & ::v-deep {
    .order-data-header-cell .cell{
      font-size:15px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(153,153,153,1);
    }
  }
  .btn-container {
    display: flex;
    align-items: center;
    .btn-item {
      margin-right: 16px;
      font-size:15px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(64,110,255,1);
      cursor: pointer;
    }
  }
  .page-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
.chartForm {
  margin-top: 16px;
}
.create-chart-btn-container {
  margin-top: 58px;
  // padding-bottom: 30px;
  display: flex;
  justify-content: center;
}
.el-dropdown-menu {
  width: 240px;
  height: 240px;
  overflow-y: scroll;
}
</style>
<style lang="scss">
.create-chart-list-main {
  .el-form {
    .el-form-item {
      .el-form-item__label {
        font-size: 13px !important;
      }
      .el-input__icon {
        line-height: 24px;
      }
      .el-input__inner {
        height: 32px;
        width: 240px;
      }
    }
    .el-tag.el-tag--info {
      color: #406EFF;
      background-color: #ecf1ff;
    }
  }
  .el-select {
    .el-input__inner {
      &::-webkit-input-placeholder {
        color: #999999;
        font-size: 13px;
      }
    }
  }
}
.select-field-dropdown {
  .el-select-dropdown__item{
    display: flex;
    align-items: center;
    font-size:14px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(102,102,102,1);
    padding: 0 12px;
  }
}
.select-chart-field {
    .el-checkbox {
      width: 100%;
      .el-checkbox__label {
        // color: #666;
        font-size:14px;
        font-weight:400;
        line-height:14px;
      }
    }
  }
</style>
